import React from "react";
import Button, { ButtonType, ButtonSize } from "./components/Button/button";
import Alert, { AlertType } from "./components/Alert/alert";
import Menu from "./components/Menu/meun";
import MenuItem from "./components/Menu/MenuItem";
import SubMenu from "./components/Menu/subMenu";

import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
import Icon from "./components/Icon/icon";
import Tabs from "./components/Tab/tabs";
import TabItem from "./components/Tab/tabItem";
import Input from "./components/Input/input";
import AutoComplete, {
  DataSourceType,
} from "./components/AutoCompleteProps/autoCompleteProps";
library.add(fas);

const autoCompleteData = [
  { value: "小明", num: 1 },
  { value: "小李", num: 2 },
  { value: "小可", num: 3 },
  { value: "小行", num: 4 },
  { value: "小梦", num: 5 },
  { value: "小吉", num: 6 },
];

interface autoType {
  value: string;
  num: number;
}
const App: React.FC = () => {
  const handleFetchSuggestions = (value: string) => {
    return autoCompleteData
    // let res = autoCompleteData.filter((item) => item.value.includes(value));
    // //异步请求数据，返回一个包含value属性的对象
    // return res;
    // return fetch(`https://aip.github.com/search/users?q=${value}`)
    //   .then((res) => res.json())
    //   .then(({ items }) => {
    //     console.log(items);
    //     return items.slice(0, 10).map((item: any) => ({
    //       value: item.login,
    //       ...item,
    //     }));
    //   });
  };
  const action = (value: DataSourceType<autoType>) => {
    console.log(value);
  };

  const renderOptions = (item: DataSourceType<autoType>) => {
    return <h2>{item.value}</h2>;
  };
  return (
    <div className="App">
      <Icon icon="coffee" theme="danger" />
      <Tabs
        defaultIndex={"1"}
        style={{ width: 400, height: 400 }}
        onSelect={(index) => {
          alert("tab" + index);
        }}
      >
        <TabItem label={"Input"}>ss</TabItem>
        <TabItem label={"标题1"} disabled>
          方法
        </TabItem>
        <TabItem label={"标题1"}>嗯嗯</TabItem>
      </Tabs>
      <Tabs>
        <TabItem label={"Button"}>
          <Button autoFocus>Hello</Button>
          <Button
            onClick={() => {
              alert(123);
            }}
            btnType={ButtonType.Primary}
            size={ButtonSize.Lager}
          >
            Hello
          </Button>
          <Button
            className="test"
            btnType={ButtonType.Danger}
            size={ButtonSize.Small}
          >
            Hello
          </Button>
          <Button
            btnType={ButtonType.Link}
            href="http://www.baidu.com"
            target="_blank"
          >
            Hello
          </Button>
          <Button
            disabled={true}
            btnType={ButtonType.Link}
            href="http://www.baidu.com"
          >
            Hello
          </Button>
        </TabItem>
        <TabItem label={"Alert"}>
          <Alert
            alertType={AlertType.Success}
            title={"sssssww"}
            style={{ width: "300px" }}
            onClick={() => {
              alert(123);
            }}
            message={"wwwww"}
          />
          <Alert
            alertType={AlertType.Danger}
            title={"标题二"}
            style={{ width: "300px" }}
            message={"wwwww"}
          />
          <Alert
            alertType={AlertType.Default}
            closable={true}
            title={"标题三"}
            style={{ width: "300px" }}
            message={"wwwww"}
          />
          <Alert
            alertType={AlertType.Warning}
            title={"标题三"}
            style={{ width: "300px" }}
            message={"wwwww"}
          />
        </TabItem>
        <TabItem label={"Menu"}>
          <Menu
            defaultIndex={"0"}
            mode={"horizontal"}
            onSelect={(index) => {
              alert(index);
            }}

            // defaultOpenSubMenus={["2"]}
          >
            <MenuItem disabled={true}>1</MenuItem>
            <MenuItem>1</MenuItem>
            <SubMenu title="菜单">
              <MenuItem index={"6"}>click1</MenuItem>
              <MenuItem index={"4"}>click1</MenuItem>
              <MenuItem index={"9"}>click1</MenuItem>
              <MenuItem index={"3"}>click1</MenuItem>
            </SubMenu>
            <MenuItem>1</MenuItem>
            <MenuItem>1</MenuItem>
          </Menu>
        </TabItem>
        <TabItem label={"Input"}>
          <Input size={"lg"} />
          <Input size={"sm"} />
          <Input icon="coffee" />
          <Input prepand="前缀" />
        </TabItem>
        <TabItem label={"autoComplete"}>
          <AutoComplete
            fetchSuggestions={handleFetchSuggestions}
            onSelect={action}
            renderOption={renderOptions}
          />
        </TabItem>
      </Tabs>
    </div>
  );
};

export default App;
